import React from 'react';
import { Layout, Typography, Button, Space, Tooltip, Popconfirm } from 'antd';
import { 
  BulbOutlined, 
  QuestionCircleOutlined, 
  GithubOutlined, 
  ReloadOutlined, 
  StarOutlined
} from '@ant-design/icons';
import './Header.css';

const { Header: AntHeader } = Layout;
const { Title } = Typography;

const Header = ({ onReset }) => {
  return (
    <AntHeader className="app-header">
      <div className="header-content">
        <div className="header-left">
          <div className="logo-container">
            <div className="logo-icon">AI</div>
            <Title level={3} className="app-title">图灵画匠</Title>
          </div>
          <div className="app-subtitle">AI智能图像风格转换平台</div>
        </div>
        
        <div className="header-right">
          <Space size="middle">
            <Tooltip title="切换主题">
              <Button type="text" icon={<BulbOutlined />} className="header-button" />
            </Tooltip>
            
            <Tooltip title="使用帮助">
              <Button type="text" icon={<QuestionCircleOutlined />} className="header-button" />
            </Tooltip>
            
            <Tooltip title="GitHub仓库">
              <Button type="text" icon={<GithubOutlined />} className="header-button" />
            </Tooltip>
            
            <Popconfirm
              title="重置所有设置"
              description="确定要清除当前所有图片和设置吗？"
              onConfirm={onReset}
              okText="确定"
              cancelText="取消"
              placement="bottomRight"
            >
              <Tooltip title="重置">
                <Button type="text" icon={<ReloadOutlined />} className="header-button" />
              </Tooltip>
            </Popconfirm>
            
            <Button type="primary" icon={<StarOutlined />} className="premium-button">升级专业版</Button>
          </Space>
        </div>
      </div>
    </AntHeader>
  );
};

export default Header;